
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui"></use>
                    </svg>
                    <div class="name">返回</div>
                    <div class="fontclass">#icon-fanhui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="fontclass">#icon-dianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiayongdianqi"></use>
                    </svg>
                    <div class="name">家用电器</div>
                    <div class="fontclass">#icon-jiayongdianqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youxiang"></use>
                    </svg>
                    <div class="name">邮箱</div>
                    <div class="fontclass">#icon-youxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mingcheng"></use>
                    </svg>
                    <div class="name">名称</div>
                    <div class="fontclass">#icon-mingcheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gerenzhongxin"></use>
                    </svg>
                    <div class="name">个人中心</div>
                    <div class="fontclass">#icon-gerenzhongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuwu"></use>
                    </svg>
                    <div class="name">服务</div>
                    <div class="fontclass">#icon-fuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yingyongliebiaoxinzengyonghuxiao"></use>
                    </svg>
                    <div class="name">应用列表-新增用户（小）</div>
                    <div class="fontclass">#icon-yingyongliebiaoxinzengyonghuxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenghuo"></use>
                    </svg>
                    <div class="name">生活</div>
                    <div class="fontclass">#icon-shenghuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shijian"></use>
                    </svg>
                    <div class="name">时间</div>
                    <div class="fontclass">#icon-shijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwu"></use>
                    </svg>
                    <div class="name">购物</div>
                    <div class="fontclass">#icon-gouwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home"></use>
                    </svg>
                    <div class="name">主页</div>
                    <div class="fontclass">#icon-home</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingdan"></use>
                    </svg>
                    <div class="name">订单</div>
                    <div class="fontclass">#icon-dingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-denglu"></use>
                    </svg>
                    <div class="name">登录</div>
                    <div class="fontclass">#icon-denglu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lajitong"></use>
                    </svg>
                    <div class="name">垃圾桶</div>
                    <div class="fontclass">#icon-lajitong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duihao"></use>
                    </svg>
                    <div class="name">对号</div>
                    <div class="fontclass">#icon-duihao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weizhi"></use>
                    </svg>
                    <div class="name">位置</div>
                    <div class="fontclass">#icon-weizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baojifuben2"></use>
                    </svg>
                    <div class="name">家电维修</div>
                    <div class="fontclass">#icon-baojifuben2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantouxia"></use>
                    </svg>
                    <div class="name">箭头-下</div>
                    <div class="fontclass">#icon-jiantouxia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#icon-xiaoxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weizhi1"></use>
                    </svg>
                    <div class="name">位置</div>
                    <div class="fontclass">#icon-weizhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baojifuben"></use>
                    </svg>
                    <div class="name">洗衣new</div>
                    <div class="fontclass">#icon-baojifuben</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanxiangeps"></use>
                    </svg>
                    <div class="name">miaojie_专享</div>
                    <div class="fontclass">#icon-zhuanxiangeps</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-geren"></use>
                    </svg>
                    <div class="name">个人</div>
                    <div class="fontclass">#icon-geren</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yaochi"></use>
                    </svg>
                    <div class="name">钥匙</div>
                    <div class="fontclass">#icon-yaochi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodedingdan"></use>
                    </svg>
                    <div class="name">我的订单</div>
                    <div class="fontclass">#icon-wodedingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenghuo1"></use>
                    </svg>
                    <div class="name">生活</div>
                    <div class="fontclass">#icon-shenghuo1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanghu"></use>
                    </svg>
                    <div class="name">商户</div>
                    <div class="fontclass">#icon-shanghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mima"></use>
                    </svg>
                    <div class="name">密码</div>
                    <div class="fontclass">#icon-mima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwu1"></use>
                    </svg>
                    <div class="name">购物</div>
                    <div class="fontclass">#icon-gouwu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangcheng"></use>
                    </svg>
                    <div class="name">商城</div>
                    <div class="fontclass">#icon-shangcheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baojie"></use>
                    </svg>
                    <div class="name">保洁</div>
                    <div class="fontclass">#icon-baojie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ershouwupin"></use>
                    </svg>
                    <div class="name">二手物品</div>
                    <div class="fontclass">#icon-ershouwupin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantou"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-jiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nan"></use>
                    </svg>
                    <div class="name">男</div>
                    <div class="fontclass">#icon-nan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nv"></use>
                    </svg>
                    <div class="name">女</div>
                    <div class="fontclass">#icon-nv</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jine"></use>
                    </svg>
                    <div class="name">金额</div>
                    <div class="fontclass">#icon-jine</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gonggao"></use>
                    </svg>
                    <div class="name">公告</div>
                    <div class="fontclass">#icon-gonggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-geren1"></use>
                    </svg>
                    <div class="name">个人</div>
                    <div class="fontclass">#icon-geren1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-x1"></use>
                    </svg>
                    <div class="name">x</div>
                    <div class="fontclass">#icon-x1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-x"></use>
                    </svg>
                    <div class="name">x</div>
                    <div class="fontclass">#icon-x</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dian"></use>
                    </svg>
                    <div class="name">电</div>
                    <div class="fontclass">#icon-dian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-linshibaoji"></use>
                    </svg>
                    <div class="name">临时保洁</div>
                    <div class="fontclass">#icon-linshibaoji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sport"></use>
                    </svg>
                    <div class="name">跑步</div>
                    <div class="fontclass">#icon-sport</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuangxiu"></use>
                    </svg>
                    <div class="name">装修</div>
                    <div class="fontclass">#icon-zhuangxiu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuidianmei3"></use>
                    </svg>
                    <div class="name">水电煤－3</div>
                    <div class="fontclass">#icon-shuidianmei3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fengkuang"></use>
                    </svg>
                    <div class="name">抢单</div>
                    <div class="fontclass">#icon-fengkuang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-haoyou"></use>
                    </svg>
                    <div class="name">好友</div>
                    <div class="fontclass">#icon-haoyou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dian1"></use>
                    </svg>
                    <div class="name">水电路改造</div>
                    <div class="fontclass">#icon-dian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-202"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-202</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaofei"></use>
                    </svg>
                    <div class="name">缴费</div>
                    <div class="fontclass">#icon-jiaofei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanglao"></use>
                    </svg>
                    <div class="name">养老</div>
                    <div class="fontclass">#icon-yanglao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duihao1"></use>
                    </svg>
                    <div class="name">对号</div>
                    <div class="fontclass">#icon-duihao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duliweishengjian"></use>
                    </svg>
                    <div class="name">独立卫生间</div>
                    <div class="fontclass">#icon-duliweishengjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon1"></use>
                    </svg>
                    <div class="name">维修</div>
                    <div class="fontclass">#icon-icon1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baojifuwu"></use>
                    </svg>
                    <div class="name">保洁服务</div>
                    <div class="fontclass">#icon-baojifuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugai"></use>
                    </svg>
                    <div class="name">修改</div>
                    <div class="fontclass">#icon-xiugai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanzhengma"></use>
                    </svg>
                    <div class="name">验证码</div>
                    <div class="fontclass">#icon-yanzhengma</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaofeijilu"></use>
                    </svg>
                    <div class="name">就医记录_缴费记录</div>
                    <div class="fontclass">#icon-jiaofeijilu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-leimu"></use>
                    </svg>
                    <div class="name">类目</div>
                    <div class="fontclass">#icon-leimu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhoubiankehu"></use>
                    </svg>
                    <div class="name">周边客户</div>
                    <div class="fontclass">#icon-zhoubiankehu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoqugonggao01"></use>
                    </svg>
                    <div class="name">小区公告</div>
                    <div class="fontclass">#icon-xiaoqugonggao01</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baomu2"></use>
                    </svg>
                    <div class="name">保姆 2</div>
                    <div class="fontclass">#icon-baomu2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-falv"></use>
                    </svg>
                    <div class="name">法律</div>
                    <div class="fontclass">#icon-falv</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiangdan"></use>
                    </svg>
                    <div class="name">抢单</div>
                    <div class="fontclass">#icon-qiangdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua1"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="fontclass">#icon-dianhua1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-denglu1"></use>
                    </svg>
                    <div class="name">登录</div>
                    <div class="fontclass">#icon-denglu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yiqueren"></use>
                    </svg>
                    <div class="name">已确认</div>
                    <div class="fontclass">#icon-yiqueren</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-filter"></use>
                    </svg>
                    <div class="name">筛选</div>
                    <div class="fontclass">#icon-filter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wujiaoxing-copy"></use>
                    </svg>
                    <div class="name">五角星</div>
                    <div class="fontclass">#icon-wujiaoxing-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-riqi"></use>
                    </svg>
                    <div class="name">日期</div>
                    <div class="fontclass">#icon-riqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wuyefeiyongchuzhang"></use>
                    </svg>
                    <div class="name">物业费用出账</div>
                    <div class="fontclass">#icon-wuyefeiyongchuzhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shui"></use>
                    </svg>
                    <div class="name">水</div>
                    <div class="fontclass">#icon-shui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoujihao"></use>
                    </svg>
                    <div class="name">手机号</div>
                    <div class="fontclass">#icon-shoujihao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jigou"></use>
                    </svg>
                    <div class="name">机构</div>
                    <div class="fontclass">#icon-jigou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwudai"></use>
                    </svg>
                    <div class="name">购物袋</div>
                    <div class="fontclass">#icon-gouwudai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiao208"></use>
                    </svg>
                    <div class="name">投诉</div>
                    <div class="fontclass">#icon-tubiao208</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-leixing"></use>
                    </svg>
                    <div class="name">类型</div>
                    <div class="fontclass">#icon-leixing</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
